<template>
  <div>
    <div style="padding-bottom: 20px;text-align: right;">
      <!-- <el-button
        :type="info.shoucang == 0 ? 'info' : 'success'"
        @click="clickShoucang"
      >{{ (info.shoucang == 0 ? "收藏" : "取消收藏") }}</el-button>-->
    </div>
    <el-row>
      <!-- 左侧 -->
      <el-col :span="12">
        <el-descriptions title="基本信息" border>
          <!-- 基本信息 -->
          <el-descriptions-item label="申请时间" span="1">{{ formatYearMonthDay(info.createTime) }}</el-descriptions-item>
          <el-descriptions-item label="申请人" span="1">{{ info.shenqingname }}</el-descriptions-item>

          <!-- 这里要获取事件状态 -->
          <!-- 用户名称(申请\审核人) -->
          <el-descriptions-item label="申请状态" span="1">
            <el-tag v-if="info.approvalStates == 0" type="warning">审核</el-tag>
            <el-tag v-if="info.approvalStates == 1" type="success">通过</el-tag>
            <el-tag v-if="info.approvalStates == 2" type="danger">拒绝</el-tag>
            <el-tag v-if="info.approvalStates == 3" type="info">撤销</el-tag>
          </el-descriptions-item>

          <!-- 差异信息 -->
          <el-descriptions-item label="发起部门" span="6">{{ info.danwei }}</el-descriptions-item>
          <el-descriptions-item label="发文时间" span="6">{{ formatYearMonthDay(info.chengwenDate) }}</el-descriptions-item>
          <el-descriptions-item label="标题" span="6">{{ info.biaoti }}</el-descriptions-item>
          <el-descriptions-item label="内容摘要" span="6">{{ info.zhaiyao }}</el-descriptions-item>

          <!-- 相关文件 -->
          <el-descriptions-item label="附件" span="6">
            <p v-for="(item, index) in info.url " :key="index" style>
              <el-link :href="item.url" type="primary" target="_blank">{{ item.name }}</el-link>
            </p>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>

      <!-- 右侧 -->
      <el-col :span="10" :offset="1">
        <el-row>
          <el-col :span="24">
            <div style="  font-size: 16px;font-weight: 700;color: black;padding: 0px 0px 20px 0px;">
              <b>审核进度</b>
            </div>
          </el-col>
        </el-row>
        <div v-for="(audi, idx) in auditors" :key="idx">
          <el-row>
            <el-col :span="24">
              <div v-if="idx > 0" class="step-arrow">
                <div>
                  <i class="el-icon-caret-bottom" />
                </div>
              </div>
            </el-col>
          </el-row>

          <div class="step">
            <div class="step-title">
              <el-row>
                <el-col :span="8">
                  <el-row>
                    <el-col :span="12">
                      <div class="step-title-left">{{ auditors[0].sta==0 && audi.stepName =='分管领导'? "待选择" : audi.name }}
                      </div>
                    </el-col>
                    <el-col :span="12" v-if="urgingInedx == idx">
                      <div style="color: #0b847b;font-weight: bold;" @click="urgingBtn(audi,idx)">
                          <i class="el-icon-s-promotion"></i>
                          催办
                        </div>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="8">
                  <div class="step-title-center">
                    <el-tag v-if="audi.sta == 0" size="mini" type="warning">未审核</el-tag>
                    <el-tag v-if="audi.sta == 1" size="mini" type="primary">同意</el-tag>
                    <el-tag v-if="audi.sta == 2" size="mini" type="danger">拒绝</el-tag>
                    <el-tag v-if="audi.sta == 3" size="mini" type="info">撤回</el-tag>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="step-title-right">{{ audi.stepName  }}</div>
                </el-col>
              </el-row>
            </div>
            <div class="step-info">
              <el-row>
                <el-col v-if="audi.sta > 0 && audi.msg == ''" :span="16">
                  <div class="msg">
                    <i>
                      <b>意见：</b>无
                    </i>
                  </div>
                </el-col>
                <el-col v-if="audi.sta > 0 && audi.msg != ''" :span="16">
                  <div class="msg">
                    <i>
                      <b>意见：</b>
                      {{ audi.msg }}
                    </i>
                  </div>
                </el-col>
                <el-col v-if="audi.sta > 0" :span="8">
                  <div class="img-qm">
                    <el-image :src="audi.signimg" class="img-qm1" />
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="step-footer">
              <el-row>
                <el-col v-if="audi.sta > 0" :span="24">
                  <div class="step-footer-right">{{ getFormatedTimeStr(audi.ts) }}</div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { websock } from "@/websock";
import moment from "moment";
import { getXinjian,urgingFlowApi } from "@/api2/xinjianfawen";

export default {
  // 组件名称
  name: "GongwenLiuzhuanDetail",
  props: {
    // ids: Number,
    id: Number
  },
  data() {
    return {
      urgingInedx:null,
      loginId: JSON.parse(sessionStorage.getItem("loginUserinfo")).uid,
      info: {},
      staStr: "",
      detail: {},
      auditors: []
    };
  },
  watch: {
    id(d1, d2) {
      console.log(d1, d2);
      this.info = {};
      const id = d1;
      // const taskId = this.ids;
      if (d1 == 0) return;
      // 这里要改
      console.log(id);
      getXinjian(id).then(res => {
        this.info = res.data;
        // this.detail = res.data;
        this.info.shenqingname = res.data.newDispatch.createBy; //申请人
        this.info.createTime = res.data.newDispatch.createTime; //申请时间
        this.info.bianhao = res.data.newDispatch.receiveNumber; //编号
        this.info.wenhao = res.data.newDispatch.receiveFontSize; //文号
        this.info.danwei = res.data.newDispatch.receiveUnit; //来文单位
        this.info.biaoti = res.data.newDispatch.title; //标题
        this.info.chengwenDate = res.data.newDispatch.receiveData; //来文时间
        this.info.zhaiyao = res.data.newDispatch.content; //内容摘要
        this.info.url = res.data.newDispatch.accessoryBeans; //附件
        this.info.approvalStates = res.data.newDispatch.approvalState; //附件
        this.approvalProcessDataBeanMaps =
          res.data.newDispatch.approvalProcessDataBeanMap; //附件
        this.info.approvalProcessDataBeanMap = Array.from(
          Object.values(res.data.newDispatch.approvalProcessDataBeanMap),
          x => x
        );
        this.canUrge(this.info.approvalProcessDataBeanMap)

        websock
          .getUserInfoByUid({
            uid: this.info.newDispatch.uid
          })
          .then(data => {
            // console.log("get user info by uid", this.info.uid, data);
            // this.info.shenqingname = data.data.newDispatch.createBy;
            console.log("this info", this.info);
            this.$forceUpdate();
          });
        this.auditors = [];
        for (const key in this.info.approvalProcessDataBeanMap) {
          this.auditors.push(this.info.approvalProcessDataBeanMap[key]);
          websock
            .getUserInfoByUid({
              uid: this.info.approvalProcessDataBeanMap[key].uid
            })
            .then(data => {
              this.info.approvalProcessDataBeanMap[key].name = data.name;
              this.info.approvalProcessDataBeanMap[key].signimg = data.signimg;
              this.$forceUpdate();
            });
          console.log(this.auditors);
        }
      });
    }
  },
  async mounted() {
    console.log(this.id, this.ids);
    const id = this.id;
    // const taskId = this.ids;
    // const res = await getXinjian(id, taskId);
    // console.log(res);
    getXinjian(id).then(res => {
      this.info = res.data;
      console.log(this.info);
      // this.detail = res.data;
      this.info.shenqingname = res.data.newDispatch.createBy; //申请人
      this.info.createTime = res.data.newDispatch.createTime; //申请时间
      this.info.bianhao = res.data.newDispatch.receiveNumber; //编号
      this.info.wenhao = res.data.newDispatch.receiveFontSize; //文号
      this.info.danwei = res.data.newDispatch.receiveUnit; //来文单位
      this.info.biaoti = res.data.newDispatch.title; //标题
      this.info.chengwenDate = res.data.newDispatch.receiveData; //来文时间
      this.info.zhaiyao = res.data.newDispatch.content; //内容摘要
      this.info.url = res.data.newDispatch.accessoryBeans; //附件
      this.approvalProcessDataBeanMaps =
        res.data.newDispatch.approvalProcessDataBeanMap; //附件
      this.info.approvalProcessDataBeanMap = Array.from(
        Object.values(res.data.newDispatch.approvalProcessDataBeanMap),
        x => x
      );
      this.canUrge(this.info.approvalProcessDataBeanMap)

      websock
        .getUserInfoByUid({
          uid: this.info.newDispatch.uid
        })
        .then(data => {
          // this.info.shenqingname = data.data.newDispatch.createBy;

          this.$forceUpdate();
        });
      this.auditors = [];
      for (const key in this.info.approvalProcessDataBeanMap) {
        this.auditors.push(this.info.approvalProcessDataBeanMap[key]);
        websock
          .getUserInfoByUid({
            uid: this.info.approvalProcessDataBeanMap[key].uid
          })
          .then(data => {
            this.info.approvalProcessDataBeanMap[key].name = data.name;
            this.info.approvalProcessDataBeanMap[key].signimg = data.signimg;
            this.$forceUpdate();
          });
        console.log(this.auditors);
      }
    });

  },
  created() {
    this.fetchData();
  },
  methods: {
    // 判断可以催办哪个人
    canUrge(map) {
      const userId = JSON.parse(sessionStorage.getItem("loginUserinfo")).uid;
      for (let i = 0; i < map.length; i++) {
        let item = map[i];
        if (item.sta == 0) {
          if (item.uid != userId) {
            this.urgingInedx = i;
          }
          break;
        } else if (item.sta == 2 || item.sta == 3) {
          this.urgingInedx = null;
          return
        }
      }
    },

    // 催办
    urgingBtn(audi,idx) {
      console.log(this.detail, this.id)
      let data = {
        taskId: this.detail.id ? this.detail.id : this.id,
        position: idx,
        userId: audi.uid,
        type: "1"
      };
      urgingFlowApi(data)
        .then((res) => {
          if (res.code === 0) {
            this.msgSuccess("催办成功")
          } else {
              this.msgError("催办失败")
          }
        })
        .catch((err) => {
          console.log(err)
          this.msgError("催办失败")
        })
    },

    // 获取格式化时间字符串
    getFormatedTimeStr(stamp, str = "MM-DD HH:mm") {
      return moment(stamp).format(str);
    },
    fetchData() { },

    formatYearMonthDay(src) {
      return moment(src).format("YYYY-MM-DD");
    },
    getEventStaStr(sta) {
      if (sta === 1) {
        return "待审核";
      } else if (sta === 2) {
        return "通过";
      } else if (sta === 3) {
        return "拒绝";
      } else if (sta === 4) {
        return "撤销";
      }
    },
    getTaskStaStr(sta) {
      if (sta === 0) {
        return "未批示";
      } else if (sta === 1) {
        return "同意";
      } else if (sta === 2) {
        return "拒绝";
      } else if (sta === 3) {
        return "已撤回";
      }
    },
    onPageSizeChange(val) {
      this.pageCount = val;
      this.fetchData();
    },
    onCurrentPageChange(val) {
      this.pageIndex = val;
      this.fetchData();
    },
    async clickShoucang() {
      try {
        if (this.info.shoucang) {
          await websock.cancelShoucang({ id: this.info.id, typ: 18 });
          this.info.shoucang = 0;
        } else {
          await websock.shoucangGongwen({
            id: this.info.id,
            typ: 18,
            title: this.info.biaoti,
            content: this.info.zhaiyao
          });
          this.info.shoucang = 1;
        }
      } catch (err) {
        console.error(err);
        this.$message.error(err.message || "error");
      }
    }
  }
};
</script>

<style>
@import url("../../styles/detail.css");
</style>
